<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

    <!-- 文章详情 -->
    <div class="container">
        <div class="row">
            <!-- 标题及作者 -->
            <div class="col-9">
                <h1 class="mt-4 mb-4">{{ article.title }}</h1>
                <div class="alert alert-success">
                    <div>作者：{{ article.author }}
                        {% if user == article.author %}
                            · <a href="#" onclick="confirm_delete()">删除文章</a>
                            · <a href="{% url "myblog:article_update" article.id %}">编辑文章</a>

                        {% endif %}
                    </div>
                    <div>
                        浏览：{{ article.total_views }}
                    </div>
                    <!-- 新增一个隐藏的表单 -->
                    <form
                            style="display:none;"
                            id="safe_delete"
                            action="{% url 'myblog:article_safe_delete' article.id %}"
                            method="POST"
                    >
                        {% csrf_token %}
                        <button type="submit">发送</button>
                    </form>
                </div>
            </div>
            <div id="sidebar" class="sidebar">
                <div class="sidebar__inner">
                    <h4><strong>目录</strong></h4>
                    <hr>
                    <div>
                        {{ toc|safe }}
                    </div>
                </div>
            </div>
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
            <!-- 新增点赞按钮 -->
            <div style="text-align:center;" class="mt-4">
                <button class="btn btn-outline-danger"
                        type="button"
                        onclick="validate_is_like(
                                '{% url 'myblog:increase_likes' article.id %}',
                                {{ article.id }},
                                {{ article.likes }}
                                )"
                >
                    <span>点赞</span>
                    <span>
            <i class="fas fa-heart"></i>
        </span>
                    <span id="likes_number">
            {{ article.likes }}
        </span>
                </button>
            </div>

        </div>


        <!-- 发表评论 -->
        <hr>
        {% if user.is_authenticated %}
            <div>
                <form
                        action="{% url 'comment:post_comment' article.id %}"
                        method="POST"
                >
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="body">
                            <strong>
                                我也要发言：
                            </strong>
                        </label>
                        <div>
                            {{ comment_form.media }}
                            {{ comment_form.body }}
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary ">发送</button>
                </form>
            </div>
            <br>
        {% else %}
            <br>
            <h5 class="row justify-content-center">
                请<a href="{% url 'userprofile:login' %}">登录</a>后回复
            </h5>
            <br>
        {% endif %}

        <br>
        <!-- 显示评论 -->
        {% load mptt_tags %}
        <h4>共有{{ comments.count }}条评论</h4>
        <div class="row">
            <!-- 遍历树形结构 -->
            {% recursetree comments %}
                <!-- 给 node 取个别名 comment -->
                {% with comment=node %}
                    <div class="{% if comment.reply_to %}
                        offset-1 col-11
                        {% else %}
                        col-12
                        {% endif %}"
                    >
                        <hr>
                        <p>
                            <strong style="color: pink">
                                {{ comment.user }}
                            </strong>

                            {% if comment.reply_to %}
                                <i class="far fa-arrow-alt-circle-right"
                                   style="color: cornflowerblue;"
                                ></i>
                                <strong style="color: pink">
                                    {{ comment.reply_to }}
                                </strong>
                            {% endif %}

                        </p>
                        <div>{{ comment.body|safe }}</div>

                        <div>
                    <span style="color: gray">
                        {{ comment.created|date:"Y-m-d H:i" }}
                    </span>

                            <!-- 加载 modal 的按钮 -->
                            {% if user.is_authenticated %}
                                <button type="button"
                                        class="btn btn-light btn-sm text-muted"
                                        onclick="load_modal({{ article.id }}, {{ comment.id }})"
                                >
                                    回复
                                </button>
                            {% else %}
                                <a class="btn btn-light btn-sm text-muted"
                                   href="{% url 'userprofile:login' %}"
                                >
                                    回复
                                </a>
                            {% endif %}
                        </div>

                        <!-- Modal -->
                        <div class="modal fade"
                             id="comment_{{ comment.id }}"
                             tabindex="-1"
                             role="dialog"
                             aria-labelledby="CommentModalCenter"
                             aria-hidden="true"
                        >
                            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                <div class="modal-content" style="height: 480px">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalCenterTitle">回复 {{ comment.user }}：</h5>
                                    </div>
                                    <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
                                </div>

                            </div>
                        </div>

                        {% if not comment.is_leaf_node %}
                            <div class="children">
                                {{ children }}
                            </div>
                        {% endif %}
                    </div>


                {% endwith %}
            {% endrecursetree %}
        </div>


        <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
        <style>
            .sidebar {
                will-change: min-height;
            }

            .sidebar__inner {
                transform: translate(0, 0);
                transform: translate3d(0, 0, 0);
                will-change: position, transform;
            }
        </style>

        {% block script %}
            <script>
                // 删除文章的函数
                function confirm_delete() {
                    // 调用layer弹窗组件
                    layer.open({
                        // 弹窗标题
                        title: "确认删除",
                        // 正文
                        content: "确认删除这篇文章吗？",
                        // 点击确定按钮后调用的回调函数
                        yes: function (index, layero) {
                            // 指定应当前往的 url
                            location.href = '{% url "myblog:article_delete" article.id %}'
                        },
                    })
                }

                function confirm_safe_delete() {
                    layer.open({
                        title: "确认删除",
                        content: "确认删除这篇文章吗？",
                        yes: function (index, layero) {
                            $('form#safe_delete button').click();
                            layer.close(index);
                        }
                    })
                }
            </script>
            <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
            <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
            <script type="text/javascript">
                $('#sidebar').stickySidebar({
                    topSpacing: 20,
                    bottomSpacing: 20,
                });
            </script>
            <script>
                $(".django-ckeditor-widget").removeAttr('style');
            </script>
            <script>
                // 加载 modal
                function load_modal(article_id, comment_id) {
                    let modal_body = '#modal_body_' + comment_id;
                    let modal_id = '#comment_' + comment_id;

                    // 加载编辑器
                    if ($(modal_body).children().length === 0) {
                        let content = '<iframe src="/comment/post-comment/' +
                            article_id +
                            '/' +
                            comment_id +
                            '"' +
                            ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
                            comment_id +
                            '"></iframe>';
                        $(modal_body).append(content);
                    }
                    ;

                    $(modal_id).modal('show');
                }
            </script>
            <!-- csrf token -->
            <script src="{% static 'csrf.js' %}"></script>
            <script>
                // 点赞功能主函数
                function validate_is_like(url, id, likes) {
                    // 取出 LocalStorage 中的数据
                    let storage = window.localStorage;
                    const storage_str_data = storage.getItem("my_blog_data");
                    let storage_json_data = JSON.parse(storage_str_data);
                    // 若数据不存在，则创建空字典
                    if (!storage_json_data) {
                        storage_json_data = {}
                    }
                    ;
                    // 检查当前文章是否已点赞。是则 status = true
                    const status = check_status(storage_json_data, id);
                    if (status) {
                        layer.msg('已经点过赞了哟~');
                        // 点过赞则立即退出函数
                        return;
                    } else {
                        // 用 Jquery 找到点赞数量，并 +1
                        $('span#likes_number').text(likes + 1).css('color', '#dc3545');
                    }
                    // 用 ajax 向后端发送 post 请求
                    $.post(
                        url,
                        // post 只是为了做 csrf 校验，因此数据为空
                        {},
                        function (result) {
                            if (result === 'success') {
                                // 尝试修改点赞数据
                                try {
                                    storage_json_data[id] = true;
                                } catch (e) {
                                    window.localStorage.clear();
                                }
                                ;
                                // 将字典转换为字符串，以便存储到 LocalStorage
                                const d = JSON.stringify(storage_json_data);
                                // 尝试存储点赞数据到 LocalStorage
                                try {
                                    storage.setItem("my_blog_data", d);
                                } catch (e) {
                                    // code 22 错误表示 LocalStorage 空间满了
                                    if (e.code === 22) {
                                        window.localStorage.clear();
                                        storage.setItem("my_blog_data", d);
                                    }
                                }
                                ;
                            } else {
                                layer.msg("与服务器通信失败..过一会儿再试试呗~");
                            }

                        }
                    );
                };

                // 辅助点赞主函数，验证点赞状态
                function check_status(data, id) {
                    // 尝试查询点赞状态
                    try {
                        if (id in data && data[id]) {
                            return true;
                        } else {
                            return false;
                        }
                    } catch (e) {
                        window.localStorage.clear();
                        return false;
                    }
                    ;
                };
            </script>
        {% endblock script %}
    </div>
{% endblock content %}